Skip to main content

React

Custom Hooks​

  • Todo (skip in the workshop)

Refs​

  • Todo (skip in the workshop)

|| vs ??​

  • Nullish coalescing operator.
  • Examples here.
  • The highlighted line below is problematic. We indicate that the user is logged out only when username is null.
  • However, if a user signs up with the username "false" (a string), the highlighted line will not be rendered (logic error: system assumes user is logged out), which is incorrect.
...

const username = "false"; // string if logged in, null if not.

return (
  <div>
    {username || <p>Logged in as: {username}</p>}
  </div>
);

...

Key prop​

Using uuidv4​

import { v4 as uuidv4 } from "uuid";

export default function MyComponent() {
  const items = ["apple", "banana", "cherry"];

  return (
    <ul>
      {items.map((item) => (
        <li key={uuidv4()}>{item}</li>
      ))}
    </ul>
  );
}

Using index​

export default function MyComponent() {
  const items = ["apple", "banana", "cherry"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={`list-item-${index}`}>{item}</li>
      ))}
    </ul>
  );
}